<template>
  <n-text>{{ cityLabel }}</n-text>
</template>

<script>
  import { ref, watchEffect } from 'vue';
  import { GetCityLabel } from '@/api/apply/provinces';

  export default {
    props: {
      provinceId: {
        type: Number,
        required: true,
      },
    },
    setup(props) {
      const cityLabel = ref('');

      watchEffect(async () => {
        try {
          const data = await GetCityLabel({
            oldId: props.provinceId,
            spilt: '-',
          });
          cityLabel.value = data;
        } catch (error) {
          console.error('Failed to fetch city label:', error);
          cityLabel.value = '未知';
        }
      });

      return {
        cityLabel,
      };
    },
  };
</script>
